<template>
  <div class="loading">
    <transition name="el-fade-in-linear">
      <div class="myLoading__modal" v-if="myLoading.loading">
        <div class="icon__container">
          <i-ep-FullScreen class="icon__style" />
        </div>
        <!-- <div class="text__container">易直播平台</div> -->
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
  import { useMyLoading } from "@/store/modules/myLoading";
  const myLoading = useMyLoading();
  console.log("myLoading  ", myLoading);
  const handleOpen = () => {
    myLoading.changeLoading(true);
  };
  const handleClose = () => {
    myLoading.changeLoading(false);
  };
  defineExpose({ handleOpen, handleClose });
</script>

<style lang="scss" scoped>
  @keyframes rotate {
    from {
      transform: rotate(0deg);
      opacity: 1;
    }
    to {
      transform: rotate(360deg);
      opacity: 0.5;
    }
  }
  .myLoading__modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    color: var(--el-color-primary);

    .icon__container {
      margin-bottom: 10px;
      .icon__style {
        animation: rotate 1s linear infinite;
      }
    }
    .text__container {
    }
  }
</style>
